
import './commomadd.scss'
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Upload, Select } from 'antd'
import { CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import http from '../../../utils/http'
import store from '../../../store/index'
// 地图组件
import BuildingMap from '../../Building_information_management/BuildingMap/BuildingMap';

export const CommomAdd = (props) => {

    useEffect(() => {
        http({
            url: '/announcement/AnnRoom'
        }).then((res) => {
            setOp(res.data)
        })
    }, [])
    // 下拉框
    const [op, setOp] = useState([])
    const { Option } = Select;

    // 监听浏览器 回退没有
    window.onpopstate = function (event) {
        if (event.state !== null) {
            props.setIsCommomAdd(false)
        }
    }

    let usenavigate = useNavigate()
    console.log(props);


    // 上传资源图片表单
    const normResourcesFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    // 图片实例
    const [resourcesList, setResourcesList] = useState([]);
    const onResourcesChange = ({ fileList: newFileList }) => {
        setResourcesList(newFileList);
    };

    // 上传户型图
    const normhouseTypeFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    // 图片实例
    const [houseTypeList, setHouseTypeList] = useState([]);
    const onHouseTypeChange = ({ fileList: newFileList }) => {
        setHouseTypeList(newFileList);
    };


    // 保存
    const commomPreservation = () => {
        const v = form.getFieldsValue(true)
        console.log('bcl', v);
        http({
            url: "/announcement/insertAnnouncement",
            params: {
                // 资源名称
                annName: v.resourcesName,
                // 房间名称
                roomId: v.CommomRoomName,
                // rmb
                annMoney: v.commomMoney,
                annArea: v.resourcesBoodles,
                annType: v.resourcesType,
                annNum: v.accommodateNumber,
                annWhere: store.zhangxi.mapAddress,
            }
        }).then((res) => {
            console.log(res);
        })
    }

    // 表单
    const [form] = Form.useForm();


    // 文本框
    const { TextArea } = Input;
    // 返回父级
    const commomReturn = () => {
        props.setIsCommomAdd(false)
        usenavigate('/home/Operate/CommonResourceManagement')
    }
    return (
        <div className='commomAdd_box'>
            {/* 顶层样式 */}
            <div className='commomadd_top'>
                <div className='commomadd_kuai'>
                    <span></span>
                    <span>共公资源新增</span>
                </div>
                <div className='commomadd_signout'>
                    <CloseOutlined onClick={commomReturn} style={{ fontSize: 20, cursor: " pointer" }} />
                </div>
            </div>

            {/* 表单 */}
            <div className='commombiao'>
                {/* 上 */}
                <div style={{ display: "flex" }}>
                    {/* 左边文字 */}
                    <div className='commomAdd_biao_left'>
                        <h2>公共资源信息</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='commomAdd_biao_right'>
                        {/* 左边表单 */}
                        <div className='commomAdd_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 资源名称 */}
                                <Form.Item
                                    label="资源名称"
                                    name="resourcesName"
                                    rules={[{ required: true, message: '请输入资源名称!' }]}
                                >
                                    <Input placeholder="请输入资源名称" />
                                </Form.Item>



                                {/* 房间名称 */}
                                <Form.Item label="房间名称"
                                    name="CommomRoomName"
                                    rules={[{ required: true, message: '请输入房间名称!' }]}
                                >
                                    <Select placeholder="请选择房间名称" >
                                        {op.map((item) => {
                                            return (
                                                <Option value={item.roomId} key={item.roomId}> {item.roomNo}</Option>
                                            )
                                        })}

                                    </Select>
                                </Form.Item>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 出租单价 */}
                                    <Form.Item
                                        label="出租单价"
                                        name="commomMoney"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入出租单价!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入出租单价" />
                                    </Form.Item>

                                    {/* 资源面积 */}
                                    <Form.Item
                                        label="资源面积"
                                        name="resourcesBoodles"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入资源面积!' }]}
                                        style={{
                                            flex: '1',
                                        }}

                                    >
                                        <Input placeholder="请输入资源面积" />
                                    </Form.Item>
                                </div>



                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 资源类型 */}
                                    <Form.Item
                                        label="资源类型"
                                        name="resourcesType"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入资源类型!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Select>
                                            <Option value="0">会议</Option>
                                            <Option value="1">展厅</Option>
                                        </Select>
                                    </Form.Item>

                                    {/* 容纳人数 */}
                                    <Form.Item
                                        label="容纳人数"
                                        name="accommodateNumber"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入在容纳人数!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入在容纳人数" />
                                    </Form.Item>
                                </div>





                            </Form>
                        </div>
                        {/* 右边地图 */}
                        <div className='commomAdd_biao_childright'>
                            <BuildingMap />
                        </div>
                    </div>
                </div>

                {/* 下 */}
                <div style={{ display: "flex", marginTop: "25px" }}>
                    {/* 左边文字 */}
                    <div className='commomAdd_biao_left'>
                        <h2 style={{ lineHeight: "40px" }}>展示图以及面积</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='commomAdd_biao_right' style={{ padding: "1.5% 1%" }}>
                        {/* 左边表单 */}
                        <div className='commomAdd_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >


                                {/* 展示图 */}
                                <div style={{
                                    display: "flex"
                                }}>
                                    <Form.Item label="资源展示"
                                        name="resourcesImage"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true }]}
                                        style={{
                                            flex: '1',
                                        }}>
                                        <Form.Item valuePropName="resourcesList" getValueFromEvent={normResourcesFile} noStyle>
                                            <Upload
                                                action="http://localhos:3000"
                                                listType="picture-card"
                                                fileList={resourcesList}
                                                onChange={onResourcesChange}
                                            >
                                                {/* 限制上传个数 */}
                                                {resourcesList.length < 1 && '+ 上传'}
                                            </Upload>
                                        </Form.Item>
                                    </Form.Item>

                                    {/* 户型图片 */}
                                    {<Form.Item label="户型图片"
                                        name="houseTypeImage"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true }]}
                                        style={{
                                            flex: '1',
                                        }}>
                                        <Form.Item valuePropName="houseTypeList" getValueFromEvent={normhouseTypeFile} noStyle>
                                            <Upload
                                                action=""
                                                listType="picture-card"
                                                fileList={houseTypeList}
                                                onChange={onHouseTypeChange}
                                            >
                                                {/* 限制上传个数 */}
                                                {houseTypeList.length < 1 && '+ 上传'}
                                            </Upload>
                                        </Form.Item>
                                    </Form.Item>}
                                </div>






                            </Form>

                        </div>
                        {/* 右边地图 */}
                        <div className='commomAdd_biao_childright'>


                        </div>
                    </div>
                </div>



                {/* 保存取消 */}
                <div className='commom_button_two'>
                    <Button type="primary" onClick={commomPreservation}>
                        保存
                    </Button>

                    <Button onClick={
                        () => {
                            props.setIsCommomAdd(false)
                            usenavigate('/home/Operate/CommonResourceManagement')
                        }
                    }>取消</Button>
                </div>
            </div>
        </div>
    )
}

export default CommomAdd